<template>
	<div class="memberConfig">
		<el-card shadow="hover">
			<div class="menber-config- mb15">
				<el-tabs v-model="state.activeName" class="demo-tabs">
					<el-tab-pane label="会员级别设置" :name="0">
						<el-button type="success" @click="onOpenAddLevel">添加会员级别</el-button>
						<el-table :data="tableData" style="width: 100%">
							<el-table-column type="index" label="序号" width="60"></el-table-column>
							<el-table-column prop="levelName" label="会员级别"></el-table-column>
							<el-table-column prop="upgrade" label="升级条件">
								<template #default="scope">
									<span v-if="scope.row.upgrade == 1">购买入会商品</span>
									<span v-if="scope.row.upgrade == 2">消费金额</span>
									<span v-if="scope.row.upgrade == 3">推荐金额</span>
								</template>
							</el-table-column>
							<el-table-column prop="succ" width="100px" label="达标值"></el-table-column>
							<el-table-column prop="registrationSource" width="100px" label="注册来源"></el-table-column>
							<el-table-column prop="commission" label="消费佣金比列"></el-table-column>
							<el-table-column prop="orderCommiss" label="订单佣金比列"></el-table-column>
							<el-table-column prop="memberNum" width="120px" label="会员人数"></el-table-column>
							<el-table-column label="操作" width="160px" fixed="right">
								<template #default="scope">
									<el-button text size="small" @click="onOpenEditLevel(scope.row)" type="primary">编辑</el-button>
									<el-popconfirm
										confirm-button-text="确认"
										cancel-button-text="取消"
										icon-color="#626AEF"
										title="确认要删除吗?"
										@confirm="onDeleteLevel(scope.row.id)"
									>
										<template #reference>
											<el-button text size="small" type="danger">删除</el-button>
										</template>
									</el-popconfirm>
								</template>
							</el-table-column>
						</el-table>
						<el-pagination
							@size-change="onHandleSizeChange"
							@current-change="onHandleCurrentChange"
							class="mt15"
							:pager-count="5"
							:page-sizes="[10, 20, 30]"
							v-model:current-page="levelPage.current"
							background
							v-model:page-size="levelPage.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="levelPage.total"
						>
						</el-pagination>
					</el-tab-pane>
					<el-tab-pane label="推荐佣金设置" :name="1">
						<el-form ref="formDataRef" :inline="true" :model="state.formData" label-width="120px" class="demo-form-inline">
							<el-row v-for="item in tableDataRecommend" :key="item.id">
								<el-col :span="6">
									<el-form-item prop="keyWord" :label="item.recommend" style="width: 100%">
										<el-input style="width: 100%" maxlength="200" v-model="item.commission" placeholder="请输入佣金比列" />
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-button @click="onUpdateRecommend(item)" type="primary" style="margin-left: 10px">保存</el-button>
								</el-col>
							</el-row>
						</el-form>
						<!-- <el-table :data="tableDataRecommend" table-layout="auto" style="width: 100%">
							<el-table-column type="index" width="60" label="序号"></el-table-column>
							<el-table-column prop="recommend" align="center" label="推荐关系"></el-table-column>
							<el-table-column prop="commission" align="center" label="消费佣金比列"></el-table-column>
							<el-table-column label="操作" width="160px" fixed="right">
								<template #default="scope">
									<el-button text size="small" @click="toDetail(scope.row)" type="primary">编辑</el-button>
								</template>
							</el-table-column>
						</el-table> -->
					</el-tab-pane>
				</el-tabs>
			</div>
		</el-card>
		<AddLevel ref="addLevelRef" :levelList="tableData" :memberList="memberList" :productList="productList" @onSaveSuccess="onSaveSuccess" />
		<EditLevel ref="editLevelRef" :levelList="tableData" :memberList="memberList" :productList="productList" @onSaveSuccess="onSaveSuccess" />
	</div>
</template>
<script setup name="MemberConfig">
import { useInit, useEdit, useAdd, useDel } from './hook';
import AddLevel from './component/addLevel.vue';
import EditLevel from './component/editLevel.vue';
const addLevelRef = ref();
const editLevelRef = ref();
const { initMemberLevel, initMemberRecommend, initCustomerList, tableData, tableDataRecommend, levelPage, memberList, getProductList, productList } =
	useInit();
const { onOpenAddLevel } = useAdd(addLevelRef);
const { onOpenEditLevel, onUpdateRecommend } = useEdit(editLevelRef);
const { onDeleteLevel } = useDel(initMemberLevel);

// const memberLevelPage = ref(page());

const state = reactive({
	activeName: 0,
});

const onSaveSuccess = () => {
	initMemberLevel();
};
const onHandleSizeChange = () => {
	levelPage.value.pageSize = val;
	initMemberLevel();
};

const onHandleCurrentChange = () => {
	levelPage.value.current = val;
	initMemberLevel();
};

onMounted(() => {
	initMemberLevel();
	initMemberRecommend();
	initCustomerList();
	getProductList();
});
</script>
<style lang="scss" scoped></style>
